<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <style>
        /* 调整日期范围选择器的样式 */
        .layui-input-inline {
            width: 150px;
        }

        /* 定义表格父容器的样式，使其成为弹性布局容器，并将子元素居中 */
        .table-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px; /* 可根据需要调整表格与上方搜索框的间距 */
        }

        .table-container-search{
            margin-right: 20px; /* 可根据需要调整搜索框与表格的间距 */
            margin-left: 50px;
            padding-top: 15px;
            margin-bottom: -20px;
        }
    </style>
</head>
<body>

<!--layui公共模块-->
<div th:fragment="menuRight">
    <div class="table-container-search">
        <!--查询条件-->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
            <legend>搜索条件</legend>
        </fieldset>
        <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" class="layui-input input-radius"
                               placeholder="请输入菜单名称">
                    </div>
                </div>
                <div class="layui-inline" style="text-align: center;padding-right: 15%;">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                            class="layui-icon layui-icon-search layui-icon-normal"></i>查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                            class="layui-icon layui-icon-refresh"></i><span>重置</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!--数据表格-->
    <div class="table-container">
        <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
        <div id="menuToolBar" style="display: none">
            <button type="button" lay-event="add"  class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">
                <i class="layui-icon layui-icon-add-1"></i>添加菜单
            </button>
        </div>
        <div id="menuRowBar" style="display: none;">
            <button type="button" lay-event="update"  class="layui-btn layui-btn-sm layui-btn-radius"><i
                    class="layui-icon layui-icon-edit"></i>编辑
            </button>
            <button type="button" lay-event="delete"  class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
                    class="layui-icon layui-icon-delete"></i>删除
            </button>
        </div>
    </div>

    <!--<script type="text/javascript" th:src="@{/layui/layui.js}"></script>-->
    <!--<script type="text/javascript" th:src="@{/layui_ext/dtree/dtree.js}"></script>-->
    <script type="text/javascript">

        //提升数据表格的作用域，因为底下还有一个reloadTable方法
        var tableIns;

        layui.extend({
            dtree: '/layui_ext/dtree/dtree'
        }).use(['jquery', 'form', 'layer', 'table', 'dtree'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var dtree = layui.dtree;

            //初始化表格 加载数据
            tableIns = table.render({
                elem: "#menuTable",
                title: "菜单数据表格",
                url: "/menu/loadAllMenu",
                toolbar: "#menuToolBar",
                page: true,
                width: 1500,
                height: "full-300",
                cols: [ [
                    {field: 'id', title: 'ID', align: 'center',width:'80'},
                    {field: 'pid', title: '父级菜单ID', align: 'center',width:'100'},
                    {field: 'title', title: '菜单名称', align: 'center',width:'280'},
                    {field: 'href', title: '菜单地址', align: 'center',width:'400'},
                    {field: 'icon', title: '菜单图标', align: 'center',width:'100',templet:function (d) {
                            return '<font class="layui-icon">'+d.icon+'</font>';
                        }},
                    {field: 'available', title: '是否可用', align: 'center',width:'120',templet:function (d) {
                            return d.available==1?'<span class=\"layui-badge layui-bg-green\">可用</span>':'<span class=\"layui-badge layui-bg-red\">不可用</span>';
                        }},
                    {field: 'open', title: '是否展开', align: 'center',width:'120',templet:function (d) {
                            return d.open==1?'<span class=\"layui-badge layui-bg-blue\">展开</span>':'<span class=\"layui-badge layui-bg-orange\">不展开</span>';
                        }},
                    {field: 'ordernum', title: '排序码', align: 'center',width:'100'},
                    {field: 'target', title: 'TARGET', align: 'center',width:'100',hide:true},
                    {fixed: 'right', title: '操作', toolbar: '#menuRowBar', align: 'center',width:'190'}
                ] ],
                done: function (data, curr, count) {
                    //不是第一页时，如果当前返回的数据为0那么就返回上一页
                    if (data.data.length == 0 && curr != 1) {
                        tableIns.reload({
                            page: {
                                curr: curr - 1
                            }
                        })
                    }
                }
            });

            //监控模糊查询按钮事件
            form.on("submit(doSearch)", function (data) {
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            //监控工具条事件
            table.on("toolbar(menuTable)", function (obj) {
                switch (obj.event) {
                    case 'add':
                        openAddLayer();
                        break;
                };
            });

            //监控行工具条事件
            table.on("tool(menuTable)", function (obj) {
                //获取当前行数据
                var data = obj.data;
                switch (obj.event) {
                    case 'delete':
                        deleteMenu(data);
                        break;
                    case 'update':
                        updateMenu(data);
                        break;
                };
            });

            var mainIndex;
            var url;

            //打开添加弹出层
            function openAddLayer() {
                mainIndex = layer.open({
                    type:1,
                    content:$("#addOrUpdateDiv"),
                    area:['800px','450px'],
                    title:'添加菜单',
                    success:function () {
                        $("#dataFrm")[0].reset();
                        //设置下拉树中父节点的值为空
                        $("#pid").val("");
                        url="/menu/addMenu";
                        //初始化排序码
                        $.get("/menu/loadMenuMaxOrderNum",function (res) {
                            $("#ordernum").val(res.value);
                        });
                        //设置下拉树的value值为空
                        selectTree.selectVal("");
                    }
                });
            }

            //打开修改的弹出层
            function updateMenu(data) {
                mainIndex = layer.open({
                    type:1,
                    content:$("#addOrUpdateDiv"),
                    area:['800px','450px'],
                    title:'修改菜单',
                    success:function () {
                        //清空原有的数据
                        $("#dataFrm")[0].reset();
                        //装载新的数据
                        form.val("dataFrm",data);
                        //选中之前的父级菜单  nodeId=data.pid
                        dtree.dataInit("menuTree",data.pid);
                        dtree.selectVal("menuTree");
                        url="/menu/updateMenu";
                    }
                });
            }

            form.on("submit(doSubmit)",function (data) {
                $.post(url,data.field,function (res) {
                    if (res.code==200){
                        tableIns.reload({
                            where:""
                        });
                        //重新加载添加弹出层的下拉树
                        selectTree.reload();
                        //重新加载左边的菜单树
                        window.parent.left.menuTree.reload();
                    }
                    layer.msg(res.msg);
                    layer.close(mainIndex);
                });
                return false;
            });

            /*$("#doSubmit").click(function () {
                var data = $("#dataFrm").serialize();
                $.post(url,data,function (res) {
                    if (res.code==200){
                        tableIns.reload();
                        //重新加载添加弹出层的下拉树
                        selectTree.reload();
                        //重新加载左边的菜单树
                        window.parent.left.menuTree.reload();
                    }
                    layer.msg(res.msg);
                    layer.close(mainIndex);
                });
            });*/

            //删除
            function deleteMenu(data) {
                $.post("/menu/checkMenuHasChildrenNode", {id: data.id}, function (resoult) {
                    if (resoult.value){
                        layer.msg("当前菜单节点有子菜单，请选择删除子菜单！")
                    }else {
                        layer.confirm('你确定要删除【' + data.title + '】这个菜单吗？', {icon: 3, title: '提示'}, function (index) {
                            $.post("/menu/deleteMenu", {id: data.id},function (res) {
                                if (res.code == 200) {
                                    tableIns.reload({
                                        where:"",
                                    });
                                    //刷新下拉树
                                    selectTree.reload();
                                    //刷新左边的菜单树
                                    window.parent.left.menuTree.reload();
                                }
                                layer.msg(res.msg);
                            });
                            layer.close(index);
                        });
                    }
                });
            }

            //初始化下拉树
            var selectTree = dtree.renderSelect({
                elem: "#menuTree",
                width: "100%", // 可以在这里指定树的宽度来填满div
                dataStyle: "layuiStyle", //使用layui风格的数据格式
                dataFormat: "list",     //配置data的风格为list
                response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
                url: "/menu/loadMenuManagerLeftTreeJson" // 使用url加载（可与data加载同时存在）
            });

            //监听点击的方法
            dtree.on("node(menuTree)",function (obj) {
                $("#pid").val(obj.param.nodeId);
                console.log(obj.param.nodeId);
            })


        });

        //给其它页面刷新当前页面数据表格的方法
        function reloadTable(id) {
            tableIns.reload({
                where:{
                    id:id
                },
                page:{
                    curr:1
                }
            });
        }

    </script>
</div>
</body>
</html>